<template>
	<view>
		<view class="tab">
			<view v-for="(item,index) in list" :key="index" class="tab-item" @click="switchTab(item, index)">
				<image class="tab_img" :src="currentIndex == index ? item.selectedIconPath : item.iconPath"></image>
				<view class="tab_text" :style="{color: currentIndex == index ? selectedColor : color}">{{item.text}}
				</view>
			</view>
			<!-- <image src="@/static/home/tabbarBG.png" class="tabbarMask"></image> -->
		</view>
		<view class="tabP"></view>
	</view>
</template>

<script>
	export default {
		props: {
			selectedIndex: { // 当前选中的tab index
				default: 0
			},
		},
		data() {
			return {
				color: "#333A54",
				selectedColor: "#6FA9FF",
				list: [],
				currentIndex: 0,
			}
		},
		created() {
			console.log('created');
			this.currentIndex = this.selectedIndex;

			let _this = this
			_this.list = [{
					"pagePath": "/pages/index/index",
					"iconPath": "/static/tabBar/tabBar1.png",
					"selectedIconPath": "/static/tabBar/tabBar1_on.png",
					"text": "首页"
				},
				// {
				// 	"pagePath": "/pages/activity/activity",
				// 	"iconPath": "/static/tabBar/tabBar3.png",
				// 	"selectedIconPath": "/static/tabBar/tabBar3_on.png",
				// 	"text": "活动"
				// },
				// {
				// 	"pagePath": "/pages/integral/integral",
				// 	"iconPath": "/static/tabBar/tabBar2.png",
				// 	"selectedIconPath": "/static/tabBar/tabBar2_on.png",
				// 	"text": "商品"
				// },
				{
					"pagePath": "/pages/my/my",
					"iconPath": "/static/tabBar/tabBar5.png",
					"selectedIconPath": "/static/tabBar/tabBar5_on.png",
					"text": "我的"
				}
			]
			// 	if (uni.getStorageSync('identify') == 'tom') {
			// 		//角色1
			// 		_this.list = [{
			// 				"pagePath": "/pages/index/index",
			// 				"iconPath": "/static/tab/home.png",
			// 				"selectedIconPath": "/static/tab/home_active.png",
			// 				"text": "首页"
			// 			},
			// 			{
			// 				"pagePath": "/pages/my/my",
			// 				"iconPath": "/static/tab/my.png",
			// 				"selectedIconPath": "/static/tab/my_active.png",
			// 				"text": "我的"
			// 			}
			// 		]
			// 	} else {
			// 		//角色2
			// 		_this.list = [{
			// 				"pagePath": "/pages/index/index",
			// 				"iconPath": "/static/tab/home.png",
			// 				"selectedIconPath": "/static/tab/home_active.png",
			// 				"text": "首页"
			// 			},
			// 			{
			// 				"pagePath": "/pages/warn/warn",
			// 				"iconPath": "/static/tab/warn.png",
			// 				"selectedIconPath": "/static/tab/warn_active.png",
			// 				"text": "告警"
			// 			},
			// 			{
			// 				"pagePath": "/pages/my/my",
			// 				"iconPath": "/static/tab/my.png",
			// 				"selectedIconPath": "/static/tab/my_active.png",
			// 				"text": "我的"
			// 			}
			// 		]
			// 	}
		},
		methods: {
			switchTab(item, index) {
				// this.currentIndex = index;
				console.log(index);
				let url = item.pagePath;
				this.$navTo1(item.pagePath)
			}
		}
	}
</script>

<style lang="scss">
	.tabP {
		height: 100rpx;
	}

	.tab {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background: white;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
		z-index: 11;

		.tabbarMask {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			bottom: 0;
			z-index: -1;
		}

		.tab-item {
			flex: 1;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.tab_img {
				width: 50rpx;
				height: 50rpx;
				object-fit: cover;
			}

			.tab_text {
				font-size: 24rpx;
				margin-top: 9rpx;
			}
		}
	}
</style>